@page "/maps/export"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates the exporting feature in Maps. You can modify the map type to geometric or OSM using the Map type dropdown list in this sample. By clicking the Export button, you can export the map in PNG, JPEG, SVG or in PDF formats.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render and configure the export functionality. The rendered map can be exported as either JPEG, PNG, SVG and PDF formats. Also this sample visualizes the locations of the seven wonders in the world using markers. Export functionality is done by <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Export_Syncfusion_Blazor_Maps_ExportType_System_String_System_Object_System_Nullable_System_Boolean__'>Export</a></code> method when <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowImageExport'>AllowImageExport</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPdfExport'>AllowPdfExport</a></code> is set as true.</p>
   <p>More information about export functionality can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/print-and-export/?no-cache=1#export'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfMaps @ref="@Maps" AllowPdfExport="true" AllowImageExport="true">
        <MapsTitleSettings Text="Location of the Wonders in the World">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
            <MapsLayers>
                <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' LayerType="@LayerValue" TValue="string">
                <MapsShapeSettings Fill="#D3D3D3">
                    <MapsShapeBorder Color="#000000" Width="0.1" />
                </MapsShapeSettings>
                <MapsMarkerSettings>
                    <MapsMarker TValue="MarkerData" Visible="true" Shape="MarkerType.Balloon" Fill="#E13E40" Height="20" Width="15" DataSource="@MarkerDataSource">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" />
                    </MapsMarker>
                    </MapsMarkerSettings>
                </MapsLayer>
            </MapsLayers>
        </SfMaps>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <table title="Properties" style="width: 100%">
        <tbody>
            <tr style="height: 50px">
                <td style="width: 40%">
                    <div>
                        Map Type
                    </div>
                </td>
                <td style="width: 60%;">
                    <div>
                        <SfDropDownList TValue="string" TItem="MapType" DataSource="@MapLayerTypes" @bind-Value="@MapValue" Width="95%">
                            <DropDownListEvents TValue="string" TItem="MapType" ValueChange="MapLayerTypeValueChange" />
                            <DropDownListFieldSettings Text="Text" Value="Text" />
                        </SfDropDownList>
                    </div>

                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 40%">
                    <div>
                        Export Type
                    </div>
                </td>
                <td style="width: 60%;margin-Top:6%;display:@GeoDisplay">
                    <div>
                        <SfDropDownList TValue="string" TItem="FileFormatType" DataSource="@GeometryFileTypes" @bind-Value="@FileType" Width="95%">
                            <DropDownListEvents TValue="string" TItem="FileFormatType" ValueChange="MapFileValueChange" />
                            <DropDownListFieldSettings Text="Text" Value="Text" />
                        </SfDropDownList>
                    </div>
                </td>
                 <td style="width: 60%;margin-Top:6%;display:@OsmDisplay">
                    <div>
                        <SfDropDownList TValue="string" TItem="FileFormatType" DataSource="@OsmFileTypes" @bind-Value="@FileType" Width="95%">
                            <DropDownListEvents TValue="string" TItem="FileFormatType" ValueChange="MapFileValueChange" />
                            <DropDownListFieldSettings Text="Text" Value="Text" />
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 40%">
                    <div>File Name</div>
                </td>
                <td style="width: 40%;">
                    <div class="e-float-input" style='margin-top: 0px;'>
                        <SfTextBox Value="@FileName" ValueChange="@NameChange" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="height: 45px;margin-left:70%; text-transform:none !important; width: 80px; ">
                        <SfButton Content="Export" OnClick="ExportClick" CssClass="e-info" IsToggle="true" IsPrimary="true"/>
                    </div>
                </td>
            </tr>

        </tbody>
    </table>
</div>
@code {
    SfMaps Maps;
    public string GeoDisplay = "block";
    public string OsmDisplay = "none";
    public string FileType { get; set; } = "JPEG";
    public string MapValue { get; set; } = "Geometry";
    public ShapeLayerType LayerValue = ShapeLayerType.Geometry;
    public string FileName { get; set; } = "Maps";
    public class MarkerData
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    };
    public List<MarkerData> MarkerDataSource = new List<MarkerData> {
        new MarkerData { Longitude=116.5703749, Latitude=40.4319077, Name="The Great Wall of China, China" },
        new MarkerData { Longitude=35.4443622, Latitude=30.3284544, Name="Petra, Jorden" },
        new MarkerData { Longitude=78.0421552, Latitude=27.1750151, Name="Taj Mahal, Agra, India" },
        new MarkerData { Longitude=12.4922309, Latitude=41.8902102, Name="The Roman Colosseum, Rome, Italy" },
        new MarkerData { Longitude=-88.5677826, Latitude=20.6842849, Name="The Chichen Itza, Mexico" },
        new MarkerData { Longitude=-72.5449629, Latitude=-13.1631412, Name="Machu Picchu, Peru" },
        new MarkerData { Longitude=-53.2104872, Latitude=-22.951916, Name="Christ Redeemer, Rio de janeiro, Brazil" }
    };
    public class MapType
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
    private List<MapType> MapLayerTypes = new List<MapType>() {
        new MapType(){ Id= "Geometry", Text= "Geometry" },
        new MapType(){ Id= "OSM", Text= "OSM" },
    };
    public class FileFormatType
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
    private List<FileFormatType> GeometryFileTypes = new List<FileFormatType>() {
        new FileFormatType(){ Id= "JPEG", Text= "JPEG" },
        new FileFormatType(){ Id= "PNG", Text= "PNG" },
        new FileFormatType(){ Id= "SVG", Text= "SVG" },
        new FileFormatType(){ Id= "PDF", Text= "PDF" },
    };
    private List<FileFormatType> OsmFileTypes = new List<FileFormatType>() {
        new FileFormatType(){ Id= "JPEG", Text= "JPEG" },
        new FileFormatType(){ Id= "PNG", Text= "PNG" },
        new FileFormatType(){ Id= "PDF", Text= "PDF" },
    };
    private void NameChange(ChangedEventArgs args)
    {
        FileName = args.Value;
    }
    private void MapFileValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FileFormatType> args)
    {
        FileType = args.Value;
    }
    public void MapLayerTypeValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, MapType> args)
    {
        MapValue = args.Value;
        if (MapValue == "Geometry")
        {
            LayerValue = ShapeLayerType.Geometry;
            GeoDisplay = "block";
            OsmDisplay = "none";
        }
        else
        {
            LayerValue = ShapeLayerType.OSM;
            GeoDisplay = "none";
            OsmDisplay = "block";
        }
    }
    private async Task ExportClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) {
        ExportType ExportFileType = ExportType.JPEG;
        switch (FileType) {
            case "JPEG":
                ExportFileType = ExportType.JPEG;
                break;
            case "PNG":
                ExportFileType = ExportType.PNG;
                break;
            case "SVG":
                ExportFileType = ExportType.SVG;
                break;
            case "PDF":
                ExportFileType = ExportType.PDF;
                break;
        }
        await Maps.ExportAsync(ExportFileType, FileName);
    }
}